<template>
  <section ref="refChart" class="chart_wrap" :class="className" :style="{ height: height, width: width }"></section>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref, watch, computed, nextTick } from 'vue'
import * as echarts from 'echarts'
import { myDebounce } from '@/utils/index'

/**
 * 父组件参数
 */
const props = defineProps({
  className: {
    type: String,
    default: 'chart'
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  },
  chartFontColor: {
    type: String,
    default: '#000'
  },
  autoResize: {
    type: Boolean,
    default: true
  },
  chartData: {
    type: Object,
    required: true
  },
  txtFontSize: {
    type: Number,
    default: 15
  }
})

/**
 * 定义变量
 */
let myChart = null // 图表
const refChart = ref(null) // 图表ref

const chartConfig = {
  barWidth: '12',
  textStyle: {
    color: '#000',
    fontSize: 10.5,
  },
  lineStyle: {
    color: '#000', // 设置横坐标线颜色
    // width: 2, // 设置横坐标线宽度
  }
}

const indicator = computed(() => {
  if (JSON.stringify(props.chartData) === '[]') {
    return [  //配置各个维度的最大值
      { name: '', max: 0 },
    ]
  }
  return props.chartData.map(item => {
    return {
      name: item.name + ` [${item.value}]`,
      max: 100
    }
  })
})

/**
 * 监听数据
 */
watch(() => props.chartData, val => {
  setOption(val)
})

/**
 * 方法
 */
/**
 * 工具方法
 */
const setProxyData = (proxyData) => JSON.parse(JSON.stringify(proxyData))

/**
 * 图表相关
 */
// 销毁图表
const destroyChart = (next) => {
  if (myChart) {
    myChart.dispose()
    myChart = null

    if (next) {
      next()
    }
  }
}
// 重置图表
const resetChart = () => {
  // console.log("初始化图表", myChart)

  destroyChart(() => {
    // 重新启动图表
    initChart()
  })
}
// 初始化图表
const initChart = () => {
  myChart = echarts.init(refChart.value, 'macarons')
  setOption(props.chartData);

  window.addEventListener('resize', myDebounce(() => {
    resetChart()
  }));
}

// 设置图表
const setOption = (chartData) => {
  if (!chartData) {
    return
  }

  // ----------------------------  图表配置开始
  const option = {
    tooltip: {
      trigger: 'item',
      textStyle: {
        color: '#000',
        fontSize: 11,
      },
    },
    radar: {
      center: ['50%', '51%'],
      radius: '68%',
      splitNumber: 5,
      shape: 'circle', // 设置为圆形
      indicator: indicator.value,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#000',
          type: 'dashed'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#97a8be',
          type: 'dashed'
        }
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ['rgba(17,85,231,.3)', 'transparent']
        }
      }
    },
    series: [
      {
        type: 'radar',
        animation: true,
        data: [{
          name: "当日各维度评分(分)",
          value: chartData.map(item => item.value),
          /* label: {
            show: true,
            formatter: function (params) {
              return params.value;
            }
          }, */
          areaStyle: {
            // 填充区颜色
            /* color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(22, 62, 112, .8)' },
              { offset: 1, color: 'rgb(74,190,254,.6)' },
            ]) */
          },
          // 线条样式
          lineStyle: {
            color: '#666',
            width: 1.5
          },
          symbol: 'circle', // 拐点形状，rect=矩形，circle=圆形
          // 拐点的大小
          symbolSize: 5,
          // 小圆点（拐点）设置为白色
          itemStyle: {
            color: '#4abefe'
          },
        }]
      },
    ]
  }
  // ----------------------------  图表配置结束

  // 绘制图表
  myChart.setOption(option)
}

/**
 * 生命周期
 */
onMounted(() => {
  nextTick(() => {
    initChart() // 初始化图表
  })
})

onBeforeUnmount(() => {
  destroyChart() // 销毁图表
})

/**
 * 暴露方法
 */
defineExpose({
  resetChart
})
</script>

<style lang="scss" scoped>
.chart_wrap {
  min-height: 100px;
}
</style>
